<form class="create-pipeline-modal-form" role="form" ng-submit="save()" autocomplete="off">
  <div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">
      <span aria-hidden="true">&times;</span>
      <span class="sr-only">Close</span>
    </button>
    <h3 class="modal-title" translate="home.library.newPipelineDefinition">New Pipeline</h3>
  </div>
  <div class="modal-body">

    <ng-include src="'app/home/alerts/error/errorAlert.tpl.html'"></ng-include>

    <div class="form-group" show-errors="{ trigger: 'keypress' }">
      <label class="control-label" translate="global.form.title">Title</label>
      <input type="text"
             autofocus
             name="name"
             autocomplete="off"
             class="form-control"
             ng-required
             placeholder="{{'home.library.namePlaceholder' | translate}}"
             ng-model="newConfig.name"
             focus-me="true">
      <p class="help-block">{{'home.library.nameValidation' | translate}}</p>
    </div>

    <div class="form-group">
      <label class="control-label" translate="global.form.description">Description</label>
      <textarea class="form-control" rows="2"
                placeholder="{{'home.library.descriptionPlaceholder' | translate}}"
                ng-model="newConfig.description"></textarea>
    </div>


    <div class="form-group">
      <ui-select reset-search-input="false"
                 ng-model="newConfig.pipelineLabel">
        <ui-select-match placeholder="Select label or add new one..." class="ui-select-match">
          <span>{{$select.selected || $select.search}}</span>
        </ui-select-match>
        <ui-select-choices class="ui-select-choices"
                           refresh=refreshResults($select)
                           refresh-delay=0 repeat="label in (pipelineLabels | filter:$select.search) track by label">
          <span>{{label}}</span>
        </ui-select-choices>
      </ui-select>
    </div>


    <div class="form-group">
      <div class="radio">
        <label><input type="radio" name="pipelineType" ng-model="newConfig.pipelineType" value="DATA_COLLECTOR">Data Collector Pipeline</label>
      </div>
      <div class="radio">
        <label><input type="radio" name="pipelineType" ng-model="newConfig.pipelineType" value="DATA_COLLECTOR_EDGE">Data Collector Edge Pipeline</label>
      </div>
      <div class="radio">
        <label><input type="radio" name="pipelineType" ng-model="newConfig.pipelineType" value="MICROSERVICE">Microservice Pipeline</label>
      </div>
    </div>

  </div>
  <div class="modal-footer">
    <button type="reset" class="btn btn-default" ng-click="cancel()"
            translate="global.form.cancel">Cancel</button>
    <button type="submit" class="btn btn-primary"
            translate="global.form.save">Save</button>
  </div>
</form>
